<script setup lang="ts">
import type { TreeProps } from 'ant-design-vue';

import { ref } from 'vue';
import { hiprint } from 'vue-plugin-hiprint';

import providers from '#/views/united/develop/print/PrintDesigner/providers';

// defineProps<>({
//   hiprintTemplate: {},
// });
const props = defineProps({
  hiprintTemplate: {
    type: undefined,
    required: true,
  },
});

// 响应式状态
const activeKeyLeftWidget = ref(['1', '2', '3']);
const expandedKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
const treeData = ref<TreeProps['treeData']>([
  {
    title: '系统字段',
    key: '0',
    isLeaf: false,
    children: [{ title: '系统字段', key: '0-1', isLeaf: false }],
  },
  { title: '企业信息', key: '1', isLeaf: false, children: [] },
]);

const treeSelect = (_a: any, treeData: any) => {
  const row = treeData.node.dataRef;
  const key = row.key;
  const title = row.title;
  if (
    (row.children === null || row.children?.length === 0) &&
    props.hiprintTemplate.value
  ) {
    textPrintHandle(key, title);
    const els = props.hiprintTemplate.value.getSelectEls();
    if (els === null || els.length === 0) {
      tablePrintHandle(key, title);
    }
  }
};
const modeList = ref([]);
modeList.value = providers.map((e) => {
  return { type: e.type, name: e.name, value: e.value };
});
const mode = ref(0);
const template = ref();
let hiprintTemplate;
const scaleValue = ref(1);
const changeMode = () => {
  const provider = providers[mode.value];
  console.log(provider);
  hiprint.init({
    providers: [provider.f],
  });
  $('.hiprintEpContainer').empty();
  hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);
  // $('#hiprint-printTemplate').empty();
  // const templates = useLocalStorage('KEY_TEMPLATES', {});
  // const templateData = templates.value[provider.value]
  //   ? templates.value[provider.value]
  //   : {};
  // template.value = hiprintTemplate = new hiprint.PrintTemplate({
  //   template: templateData,
  //   dataMode: 1,
  //   history: false,
  //   onDataChanged: (type, json) => {
  //     console.log(type);
  //     console.log(json);
  //   },
  //   settingContainer: '#PrintElementOptionSetting',
  //   paginationContainer: '.hiprint-printPagination',
  // });
  // hiprintTemplate.design('#hiprint-printTemplate');
  // scaleValue.value = hiprintTemplate.editingPanel?.scale || 1;
};
</script>

<template>
  <div>
    <a-tabs default-active-key="controls" tab-position="top" type="line">
      <a-tab-pane key="controls" tab="本地控件">
        <div>
          <a-collapse v-model:active-key="activeKeyLeftWidget" ghost>
            <a-collapse-panel
              key="1"
              header="通用控件"
              style="font-weight: bold"
            >
              <div class="control-grid">
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.text"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 28 28"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <title>文本备份</title>
                    <g
                      id="文本备份"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <path
                        d="M5.5,24 L22.5,24 L22.5,22.5 L23.999,22.5 L24,5.5 L22.5,5.5 L22.5,4 L5.5,4 L5.5,5.5 L4,5.5 L3.999,22.5 L5.5,22.5 L5.5,24 Z M4.5,23.5 L2.5,23.5 L2.5,25.5 L4.5,25.5 L4.5,23.5 Z M25.5,23.5 L23.5,23.5 L23.5,25.5 L25.5,25.5 L25.5,23.5 Z M4.5,2.5 L2.5,2.5 L2.5,4.5 L4.5,4.5 L4.5,2.5 Z M25.5,2.5 L23.5,2.5 L23.5,4.5 L25.5,4.5 L25.5,2.5 Z M5.5,26.5 L1.5,26.5 L1.5,22.5 L2.999,22.5 L3,5.5 L1.5,5.5 L1.5,1.5 L5.5,1.5 L5.5,3 L22.5,3 L22.5,1.5 L26.5,1.5 L26.5,5.5 L25,5.5 L24.999,22.5 L26.5,22.5 L26.5,26.5 L22.5,26.5 L22.5,25 L5.5,25 L5.5,26.5 Z"
                        id="形状结合"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M20.5234375,19.924 C20.7995799,19.924 21.0234375,20.1478576 21.0234375,20.424 C21.0234375,20.6694599 20.8465623,20.8736084 20.6133131,20.9159443 L20.5234375,20.924 L7.55200195,20.924 C7.27585958,20.924 7.05200195,20.7001424 7.05200195,20.424 C7.05200195,20.1785401 7.22887711,19.9743916 7.46212632,19.9320557 L7.55200195,19.924 L20.5234375,19.924 Z M20.5,17.424 C20.7761424,17.424 21,17.6478576 21,17.924 C21,18.1694599 20.8231248,18.3736084 20.5898756,18.4159443 L20.5,18.424 L15.5,18.424 C15.2238576,18.424 15,18.2001424 15,17.924 C15,17.6785401 15.1768752,17.4743916 15.4101244,17.4320557 L15.5,17.424 L20.5,17.424 Z M20.5,14.424 C20.7761424,14.424 21,14.6478576 21,14.924 C21,15.1694599 20.8231248,15.3736084 20.5898756,15.4159443 L20.5,15.424 L15.5,15.424 C15.2238576,15.424 15,15.2001424 15,14.924 C15,14.6785401 15.1768752,14.4743916 15.4101244,14.4320557 L15.5,14.424 L20.5,14.424 Z"
                        id="形状结合"
                        fill="#979797"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M12.6,17.6699621 L12.6,8.03204346 L12.6,8.03204346 L16.1159783,8.03204346 C16.4009692,8.03204346 16.632,7.80101266 16.632,7.51602173 C16.632,7.2310308 16.4009692,7 16.1159783,7 L7.78802173,7 C7.5030308,7 7.272,7.2310308 7.272,7.51602173 C7.272,7.80101266 7.5030308,8.03204346 7.78802173,8.03204346 L11.304,8.03204346 L11.304,8.03204346 L11.304,17.7739187 C11.304,18.1053028 11.57264,18.3739428 11.9040241,18.3739428 C11.9200353,18.3739428 11.9360401,18.3733019 11.952,18.3720217 C12.3179691,18.3426661 12.6,18.0371067 12.6,17.6699621 Z"
                        id="T"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                    </g>
                  </svg>
                  <span title="文本" style="font-weight: lighter">文本</span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.image"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 28 28"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <title>图片</title>
                    <g
                      id="图片"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <path
                        d="M19.0635867,11.8647461 C20.8536504,11.8647461 22.8005418,13.7442816 24.9042609,17.5033525 L25.2664347,18.1661764 C25.5089081,18.6203335 25.7534299,19.0990397 26,19.6022949 L26,23 C26,24.1045695 25.1045695,25 24,25 L4,25 C2.8954305,25 2,24.1045695 2,23 L2,17.8845201 C4.66666667,15.29484 6.66666667,14 8,14 C10,14 10.8910175,16.4140625 12.9127329,16.4140625 C13.6708761,16.4140625 14.2999834,15.7743149 14.9497399,14.9746304 L15.6119234,14.1394043 C16.5187958,13.0020752 17.5510805,11.8647461 19.0635867,11.8647461 Z M19.0635867,12.8647461 C18.2328992,12.8647461 17.5590201,13.3424069 16.5714275,14.5433547 L15.7888437,15.5273213 L15.5490143,15.8193286 C15.5112838,15.8641349 15.474257,15.9074927 15.4373086,15.9501251 C14.6063027,16.9089708 13.8692177,17.4140625 12.9127329,17.4140625 C11.8290264,17.4140625 11.1560903,17.0708566 10.03841,16.1646156 L9.78761095,15.9582593 C8.89476212,15.2155435 8.5141519,15 8,15 C7.33313035,15 6.2739504,15.5469592 4.88524327,16.6528567 L4.43582359,17.0206811 L3.96493565,17.4257486 C3.88468972,17.4963682 3.80356758,17.568543 3.72157839,17.6422748 L3.21931187,18.1033643 L3,18.309 L3,23 C3,23.5128358 3.38604019,23.9355072 3.88337887,23.9932723 L4,24 L24,24 C24.5128358,24 24.9355072,23.6139598 24.9932723,23.1166211 L25,23 L25,19.838 L24.9249973,19.6846648 C22.6893998,15.2138574 20.6966562,12.9807295 19.1821547,12.8691495 L19.0635867,12.8647461 Z"
                        id="矩形"
                        fill="#979797"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M24,3 C25.1045695,3 26,3.8954305 26,5 L26,23 C26,24.1045695 25.1045695,25 24,25 L4,25 C2.8954305,25 2,24.1045695 2,23 L2,5 C2,3.8954305 2.8954305,3 4,3 L24,3 Z M24,4 L4,4 C3.48716416,4 3.06449284,4.38604019 3.00672773,4.88337887 L3,5 L3,23 C3,23.5128358 3.38604019,23.9355072 3.88337887,23.9932723 L4,24 L24,24 C24.5128358,24 24.9355072,23.6139598 24.9932723,23.1166211 L25,23 L25,5 C25,4.48716416 24.6139598,4.06449284 24.1166211,4.00672773 L24,4 Z"
                        id="矩形备份"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M8,6.5 C6.61928813,6.5 5.5,7.61928813 5.5,9 C5.5,10.3807119 6.61928813,11.5 8,11.5 C9.38071187,11.5 10.5,10.3807119 10.5,9 C10.5,7.61928813 9.38071187,6.5 8,6.5 Z M8,7.5 C8.82842712,7.5 9.5,8.17157288 9.5,9 C9.5,9.82842712 8.82842712,10.5 8,10.5 C7.17157288,10.5 6.5,9.82842712 6.5,9 C6.5,8.17157288 7.17157288,7.5 8,7.5 Z"
                        id="椭圆形"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                    </g>
                  </svg>
                  <span title="图片" style="font-weight: lighter">图片</span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.qrcode"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 28 28"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <title>二维码</title>
                    <g
                      id="二维码"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <path
                        d="M11,3 C12.1045695,3 13,3.8954305 13,5 L13,11 C13,12.1045695 12.1045695,13 11,13 L5,13 C3.8954305,13 3,12.1045695 3,11 L3,5 C3,3.8954305 3.8954305,3 5,3 L11,3 Z M11,4 L5,4 C4.48716416,4 4.06449284,4.38604019 4.00672773,4.88337887 L4,5 L4,11 C4,11.5128358 4.38604019,11.9355072 4.88337887,11.9932723 L5,12 L11,12 C11.5128358,12 11.9355072,11.6139598 11.9932723,11.1166211 L12,11 L12,5 C12,4.48716416 11.6139598,4.06449284 11.1166211,4.00672773 L11,4 Z"
                        id="矩形"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M11,15 C12.1045695,15 13,15.8954305 13,17 L13,23 C13,24.1045695 12.1045695,25 11,25 L5,25 C3.8954305,25 3,24.1045695 3,23 L3,17 C3,15.8954305 3.8954305,15 5,15 L11,15 Z M11,16 L5,16 C4.48716416,16 4.06449284,16.3860402 4.00672773,16.8833789 L4,17 L4,23 C4,23.5128358 4.38604019,23.9355072 4.88337887,23.9932723 L5,24 L11,24 C11.5128358,24 11.9355072,23.6139598 11.9932723,23.1166211 L12,23 L12,17 C12,16.4871642 11.6139598,16.0644928 11.1166211,16.0067277 L11,16 Z"
                        id="矩形备份-2"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M23,3 C24.1045695,3 25,3.8954305 25,5 L25,11 C25,12.1045695 24.1045695,13 23,13 L17,13 C15.8954305,13 15,12.1045695 15,11 L15,5 C15,3.8954305 15.8954305,3 17,3 L23,3 Z M23,4 L17,4 C16.4871642,4 16.0644928,4.38604019 16.0067277,4.88337887 L16,5 L16,11 C16,11.5128358 16.3860402,11.9355072 16.8833789,11.9932723 L17,12 L23,12 C23.5128358,12 23.9355072,11.6139598 23.9932723,11.1166211 L24,11 L24,5 C24,4.48716416 23.6139598,4.06449284 23.1166211,4.00672773 L23,4 Z"
                        id="矩形备份"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M9,5.5 L7,5.5 C6.17157288,5.5 5.5,6.17157288 5.5,7 L5.5,9 C5.5,9.82842712 6.17157288,10.5 7,10.5 L9,10.5 C9.82842712,10.5 10.5,9.82842712 10.5,9 L10.5,7 C10.5,6.17157288 9.82842712,5.5 9,5.5 Z M7,6.5 L9,6.5 C9.27614237,6.5 9.5,6.72385763 9.5,7 L9.5,9 C9.5,9.27614237 9.27614237,9.5 9,9.5 L7,9.5 C6.72385763,9.5 6.5,9.27614237 6.5,9 L6.5,7 C6.5,6.72385763 6.72385763,6.5 7,6.5 Z"
                        id="矩形"
                        fill="#979797"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M21,5.5 L19,5.5 C18.1715729,5.5 17.5,6.17157288 17.5,7 L17.5,9 C17.5,9.82842712 18.1715729,10.5 19,10.5 L21,10.5 C21.8284271,10.5 22.5,9.82842712 22.5,9 L22.5,7 C22.5,6.17157288 21.8284271,5.5 21,5.5 Z M19,6.5 L21,6.5 C21.2761424,6.5 21.5,6.72385763 21.5,7 L21.5,9 C21.5,9.27614237 21.2761424,9.5 21,9.5 L19,9.5 C18.7238576,9.5 18.5,9.27614237 18.5,9 L18.5,7 C18.5,6.72385763 18.7238576,6.5 19,6.5 Z"
                        id="矩形备份-3"
                        fill="#979797"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M9,17.5 L7,17.5 C6.17157288,17.5 5.5,18.1715729 5.5,19 L5.5,21 C5.5,21.8284271 6.17157288,22.5 7,22.5 L9,22.5 C9.82842712,22.5 10.5,21.8284271 10.5,21 L10.5,19 C10.5,18.1715729 9.82842712,17.5 9,17.5 Z M7,18.5 L9,18.5 C9.27614237,18.5 9.5,18.7238576 9.5,19 L9.5,21 C9.5,21.2761424 9.27614237,21.5 9,21.5 L7,21.5 C6.72385763,21.5 6.5,21.2761424 6.5,21 L6.5,19 C6.5,18.7238576 6.72385763,18.5 7,18.5 Z"
                        id="矩形备份-4"
                        fill="#979797"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M15.5,18 C15.7761424,18 16,18.2238576 16,18.5 L16,24.5 C16,24.7761424 15.7761424,25 15.5,25 C15.2238576,25 15,24.7761424 15,24.5 L15,18.5 C15,18.2238576 15.2238576,18 15.5,18 Z M18.5,19 C18.7761424,19 19,19.2238576 19,19.5 L19,24.5 C19,24.7761424 18.7761424,25 18.5,25 C18.2238576,25 18,24.7761424 18,24.5 L18,19.5 C18,19.2238576 18.2238576,19 18.5,19 Z M21.5,21 C21.7761424,21 22,21.2238576 22,21.5 L22,24.5 C22,24.7761424 21.7761424,25 21.5,25 C21.2238576,25 21,24.7761424 21,24.5 L21,21.5 C21,21.2238576 21.2238576,21 21.5,21 Z M24.5,19 C24.7761424,19 25,19.2238576 25,19.5 L25,24.5 C25,24.7761424 24.7761424,25 24.5,25 C24.2238576,25 24,24.7761424 24,24.5 L24,19.5 C24,19.2238576 24.2238576,19 24.5,19 Z M21.5,15 C21.7761424,15 22,15.2238576 22,15.5 L22,19.5 C22,19.7761424 21.7761424,20 21.5,20 C21.2238576,20 21,19.7761424 21,19.5 L21,15.5 C21,15.2238576 21.2238576,15 21.5,15 Z M18.5,15 C18.7761424,15 19,15.2238576 19,15.5 L19,17.5 C19,17.7761424 18.7761424,18 18.5,18 C18.2238576,18 18,17.7761424 18,17.5 L18,15.5 C18,15.2238576 18.2238576,15 18.5,15 Z M24.5,15 C24.7761424,15 25,15.2238576 25,15.5 L25,17.5 C25,17.7761424 24.7761424,18 24.5,18 C24.2238576,18 24,17.7761424 24,17.5 L24,15.5 C24,15.2238576 24.2238576,15 24.5,15 Z M15.5,15 C15.7761424,15 16,15.2238576 16,15.5 L16,16.5 C16,16.7761424 15.7761424,17 15.5,17 C15.2238576,17 15,16.7761424 15,16.5 L15,15.5 C15,15.2238576 15.2238576,15 15.5,15 Z"
                        id="形状结合"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                    </g>
                  </svg>
                  <span title="二维码" style="font-weight: lighter">
                    二维码
                  </span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.barcode"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 28 28"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <title>条形码</title>
                    <g
                      id="条形码"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <path
                        d="M2.45361328,18.5048828 C2.72975566,18.5048828 2.95361328,18.7287404 2.95361328,19.0048828 L2.95361328,19.0048828 L2.95361328,21.3505859 L2.96047986,21.4950459 C3.0331646,22.2556979 3.67391716,22.8505859 4.45361328,22.8505859 L4.45361328,22.8505859 L7,22.8505859 L7.08987563,22.8586416 C7.32312484,22.9009776 7.5,23.105126 7.5,23.3505859 C7.5,23.6267283 7.27614237,23.8505859 7,23.8505859 L7,23.8505859 L4.45361328,23.8505859 L4.28923759,23.8452683 C2.98514922,23.7606246 1.95361328,22.6760693 1.95361328,21.3505859 L1.95361328,21.3505859 L1.95361328,19.0048828 L1.96166895,18.9150072 C2.00400491,18.681758 2.20815339,18.5048828 2.45361328,18.5048828 Z M26,18.5048828 C26.2454599,18.5048828 26.4496084,18.681758 26.4919443,18.9150072 L26.5,19.0048828 L26.5,21.3505859 C26.5,22.6760693 25.4684641,23.7606246 24.1643757,23.8452683 L24,23.8505859 L21.4536133,23.8505859 C21.1774709,23.8505859 20.9536133,23.6267283 20.9536133,23.3505859 C20.9536133,23.105126 21.1304884,22.9009776 21.3637376,22.8586416 L21.4536133,22.8505859 L24,22.8505859 C24.7796961,22.8505859 25.4204487,22.2556979 25.4931334,21.4950459 L25.5,21.3505859 L25.5,19.0048828 C25.5,18.7287404 25.7238576,18.5048828 26,18.5048828 Z M7,4.50488281 C7.27614237,4.50488281 7.5,4.72874044 7.5,5.00488281 C7.5,5.2503427 7.32312484,5.45449118 7.08987563,5.49682714 L7,5.50488281 L4.45361328,5.50488281 C3.67391716,5.50488281 3.0331646,6.0997709 2.96047986,6.8604228 L2.95361328,7.00488281 L2.95361328,9.35058594 C2.95361328,9.62672831 2.72975566,9.85058594 2.45361328,9.85058594 C2.20815339,9.85058594 2.00400491,9.67371078 1.96166895,9.44046157 L1.95361328,9.35058594 L1.95361328,7.00488281 C1.95361328,5.67939941 2.98514922,4.59484414 4.28923759,4.51020049 L4.45361328,4.50488281 L7,4.50488281 Z M24,4.50488281 L24.1643757,4.51020049 C25.4684641,4.59484414 26.5,5.67939941 26.5,7.00488281 L26.5,7.00488281 L26.5,9.35058594 L26.4919443,9.44046157 C26.4496084,9.67371078 26.2454599,9.85058594 26,9.85058594 C25.7238576,9.85058594 25.5,9.62672831 25.5,9.35058594 L25.5,9.35058594 L25.5,7.00488281 L25.4931334,6.8604228 C25.4204487,6.0997709 24.7796961,5.50488281 24,5.50488281 L24,5.50488281 L21.4536133,5.50488281 L21.3637376,5.49682714 C21.1304884,5.45449118 20.9536133,5.2503427 20.9536133,5.00488281 C20.9536133,4.72874044 21.1774709,4.50488281 21.4536133,4.50488281 L21.4536133,4.50488281 L24,4.50488281 Z"
                        id="形状结合"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <path
                        d="M18,15 C18.2761424,15 18.5,15.2238576 18.5,15.5 L18.5,18.5 C18.5,18.7761424 18.2761424,19 18,19 C17.7238576,19 17.5,18.7761424 17.5,18.5 L17.5,15.5 C17.5,15.2238576 17.7238576,15 18,15 Z M6,13 C6.27614237,13 6.5,13.2238576 6.5,13.5 L6.5,18.5 C6.5,18.7761424 6.27614237,19 6,19 C5.72385763,19 5.5,18.7761424 5.5,18.5 L5.5,13.5 C5.5,13.2238576 5.72385763,13 6,13 Z M10,15 C10.2761424,15 10.5,15.2238576 10.5,15.5 L10.5,18.5 C10.5,18.7761424 10.2761424,19 10,19 C9.72385763,19 9.5,18.7761424 9.5,18.5 L9.5,15.5 C9.5,15.2238576 9.72385763,15 10,15 Z M22,17 C22.2761424,17 22.5,17.2238576 22.5,17.5 L22.5,18.5 C22.5,18.7761424 22.2761424,19 22,19 C21.7238576,19 21.5,18.7761424 21.5,18.5 L21.5,17.5 C21.5,17.2238576 21.7238576,17 22,17 Z M14,13 C14.2761424,13 14.5,13.2238576 14.5,13.5 L14.5,18.5 C14.5,18.7761424 14.2761424,19 14,19 C13.7238576,19 13.5,18.7761424 13.5,18.5 L13.5,13.5 C13.5,13.2238576 13.7238576,13 14,13 Z M22,9 C22.2761424,9 22.5,9.22385763 22.5,9.5 L22.5,15.5 C22.5,15.7761424 22.2761424,16 22,16 C21.7238576,16 21.5,15.7761424 21.5,15.5 L21.5,9.5 C21.5,9.22385763 21.7238576,9 22,9 Z M10,9 C10.2761424,9 10.5,9.22385763 10.5,9.5 L10.5,13.5 C10.5,13.7761424 10.2761424,14 10,14 C9.72385763,14 9.5,13.7761424 9.5,13.5 L9.5,9.5 C9.5,9.22385763 9.72385763,9 10,9 Z M18,9 C18.2761424,9 18.5,9.22385763 18.5,9.5 L18.5,13.5 C18.5,13.7761424 18.2761424,14 18,14 C17.7238576,14 17.5,13.7761424 17.5,13.5 L17.5,9.5 C17.5,9.22385763 17.7238576,9 18,9 Z M6,9 C6.27614237,9 6.5,9.22385763 6.5,9.5 L6.5,11.5 C6.5,11.7761424 6.27614237,12 6,12 C5.72385763,12 5.5,11.7761424 5.5,11.5 L5.5,9.5 C5.5,9.22385763 5.72385763,9 6,9 Z M14,9 C14.2761424,9 14.5,9.22385763 14.5,9.5 L14.5,11.5 C14.5,11.7761424 14.2761424,12 14,12 C13.7238576,12 13.5,11.7761424 13.5,11.5 L13.5,9.5 C13.5,9.22385763 13.7238576,9 14,9 Z"
                        id="形状结合"
                        fill="#404040"
                        fill-rule="nonzero"
                      />
                      <rect
                        id="矩形备份-21"
                        x="16.5"
                        y="18"
                        width="1"
                        height="1"
                        rx="0.5"
                      />
                    </g>
                  </svg>
                  <span title="条形码" style="font-weight: lighter">
                    条形码
                  </span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.longText"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M821.428571 107.142857C860.877482 107.142857 892.857143 139.122518 892.857143 178.571429L892.857143 821.428571C892.857143 860.877482 860.877482 892.857143 821.428571 892.857143L178.571429 892.857143C139.122518 892.857143 107.142857 860.877482 107.142857 821.428571L107.142857 178.571429C107.142857 139.122518 139.122518 107.142857 178.571429 107.142857L821.428571 107.142857zM821.428571 142.857143L178.571429 142.857143C160.255863 142.857143 145.160459 156.644293 143.097419 174.406388L142.857143 178.571429L142.857143 821.428571C142.857143 839.744136 156.644293 854.839543 174.406388 856.902582L178.571429 857.142857L821.428571 857.142857C839.744136 857.142857 854.839543 843.355707 856.902582 825.593611L857.142857 821.428571L857.142857 178.571429C857.142857 160.255863 843.355707 145.160459 825.593611 143.097419L821.428571 142.857143zM742.093161 706.857143C751.955389 706.857143 759.950304 714.852057 759.950304 724.714286C759.950304 733.480711 753.633332 740.771729 745.303004 742.283725L742.093161 742.571429L267.857143 742.571429C257.994915 742.571429 250 734.576514 250 724.714286C250 715.947861 256.31697 708.656843 264.647299 707.144846L267.857143 706.857143L742.093161 706.857143zM742.093161 564C751.955389 564 759.950304 571.994914 759.950304 581.857143C759.950304 590.623568 753.633332 597.914586 745.303004 599.426582L742.093161 599.714286L563.521732 599.714286C553.659504 599.714286 545.664589 591.719371 545.664589 581.857143C545.664589 573.090718 551.981557 565.7997 560.311886 564.287704L563.521732 564L742.093161 564zM364.307446 267.857143C370.307446 267.857143 375.164589 269.214286 378.878875 271.928571C381.664589 273.964286 383.807446 276.522321 385.307446 279.602679L386.593161 282.857143L477.021732 545.571429C479.307446 552.428571 479.450304 558.214286 477.450304 562.928571C475.450304 567.642857 470.736018 570 463.307446 570C458.450304 570.285714 454.521732 568.928571 451.521732 565.928571C449.271732 563.678571 447.463696 560.90625 446.097625 557.611607L444.878875 554.142857L421.307446 488.571429L307.736017 488.571429L290.164589 537.857143C288.736017 541.857143 287.307446 545.714286 285.878874 549.428571C284.450303 553.142857 282.807446 556.571429 280.950303 559.714286C279.09316 562.857143 276.950303 565.357143 274.521731 567.214286C272.09316 569.071429 269.307446 570 266.164589 570C260.450303 570 256.021731 568.214286 252.878874 564.642857C250.184997 561.581632 249.800157 556.26385 251.724355 548.689504L252.878874 544.714286L342.878874 282.857143C344.307446 278.285714 346.807446 274.642857 350.378874 271.928571C353.950303 269.214286 358.593161 267.857143 364.307446 267.857143zM364.736018 311.571429L315.878874 458.571429L413.593161 458.571429L364.736018 311.571429zM742.093161 421.142857C751.955389 421.142857 759.950304 429.137771 759.950304 439C759.950304 447.766425 753.633332 455.057443 745.303004 456.569439L742.093161 456.857143L563.521732 456.857143C553.659504 456.857143 545.664589 448.862229 545.664589 439C545.664589 430.233575 551.981557 422.942557 560.311886 421.430561L563.521732 421.142857L742.093161 421.142857zM742.093161 278.285714C751.955389 278.285714 759.950304 286.28063 759.950304 296.142857C759.950304 304.909282 753.633332 312.200299 745.303004 313.712298L742.093161 314L563.521732 314C553.659504 314 545.664589 306.005085 545.664589 296.142857C545.664589 287.376433 551.981557 280.085415 560.311886 278.573417L563.521732 278.285714L742.093161 278.285714z"
                    />
                  </svg>
                  <span title="富文本" style="font-weight: lighter">
                    富文本
                  </span>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel
              key="3"
              header="容器控件"
              style="font-weight: bold"
            >
              <div class="control-grid">
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.table"
                >
                  <svg
                    class="icon"
                    width="200"
                    height="200"
                    viewBox="0 0 28 28"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <title>数据表格</title>
                    <g
                      id="数据表格"
                      stroke="none"
                      stroke-width="1"
                      fill="none"
                      fill-rule="evenodd"
                    >
                      <g
                        id="编组备份-5"
                        transform="translate(3.000000, 3.000000)"
                      >
                        <path
                          d="M7.5,7.5 L7.5,12 L14.5,11.999 L14.5,7.5 L15.5,7.5 L15.5,11.999 L21,12 L21,13 L15.5,12.999 L15.5,16.999 L21,17 L21,18 L15.5,17.999 L15.5,21.5 L14.5,21.5 L14.5,17.999 L7.5,18 L7.5,21.5 L6.5,21.5 L6.5,18 L1,18 L1,17 L6.5,17 L6.5,13 L1,13 L1,12 L6.5,12 L6.5,7.5 L7.5,7.5 Z M14.5,12.999 L7.5,13 L7.5,17 L14.5,16.999 L14.5,12.999 Z"
                          id="形状结合"
                          fill="#979797"
                        />
                        <path
                          d="M20,0 C21.1045695,0 22,0.8954305 22,2 L22,20 C22,21.1045695 21.1045695,22 20,22 L2,22 C0.8954305,22 0,21.1045695 0,20 L0,2 C0,0.8954305 0.8954305,0 2,0 L20,0 Z M1,8 L1,20 C1,20.5128358 1.38604019,20.9355072 1.88337887,20.9932723 L2,21 L20,21 C20.5128358,21 20.9355072,20.6139598 20.9932723,20.1166211 L21,20 L21,8 L1,8 Z M1,7 L21,7 L21,2 C21,1.48716416 20.6139598,1.06449284 20.1166211,1.00672773 L20,1 L2,1 C1.48716416,1 1.06449284,1.38604019 1.00672773,1.88337887 L1,2 L1,7 Z"
                          id="形状结合"
                          fill="#404040"
                          fill-rule="nonzero"
                        />
                      </g>
                    </g>
                  </svg>
                  <span title="数据表格" style="font-weight: lighter">
                    数据表格
                  </span>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel
              key="2"
              header="辅助控件"
              style="font-weight: bold"
            >
              <div class="control-grid">
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.hline"
                >
                  <i class="iconfont sv-hline"></i>
                  <span style="font-weight: lighter">横线</span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.vline"
                >
                  <i class="iconfont sv-vline"></i>
                  <span style="font-weight: lighter">竖线</span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.rect"
                >
                  <i class="iconfont sv-rect"></i>
                  <span style="font-weight: lighter">矩形</span>
                </div>
                <div
                  class="ep-draggable-item control-item"
                  tid="defaultModule.oval"
                >
                  <i class="iconfont sv-oval"></i>
                  <span style="font-weight: lighter">圆形</span>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
      <a-tab-pane key="datasource" tab="平台控件">
        <a-select
          size="small"
          v-model:value="mode"
          show-search
          @change="changeMode"
          :default-value="0"
          style="width: 100%"
        >
          <a-select-option
            v-for="(opt, idx) in modeList"
            :key="idx"
            :value="idx"
          >
            {{ opt.name }}
          </a-select-option>
        </a-select>
        <div class="rect-printElement-types hiprintEpContainer"></div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped>
/deep/ .ant-collapse-header {
  padding: 8px 0 8px 0 !important;
}
/deep/ .ant-collapse-content-box {
  padding: 8px 0 8px 0 !important;
}
.control-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.control-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 8px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
  min-height: 60px;
  flex-direction: column;
}

.control-item:hover {
  background: #f0f0f0;
  border-color: #1890ff;
}

svg.icon {
  display: flex;
  vertical-align: middle; /* 保证图标与文本对齐 */
  fill: currentColor;
  height: 28px;
  width: 28px;
}
</style>
<style scoped>
@import 'css/iconfont.css';
</style>
